<template>
	
  <view class="contain" @touchmove.stop.prevent>
	  <view class="head">
		  <view class="avatar">
			  <block v-if="isLogin">
				  <button type="default" open-type="chooseAvatar" @chooseavatar="getAvatar" @click.stop="doString" :plain="true" style="border:0px; width:100px; height:100px;" class="relative left-[-19px] top-[-5px]">
						<u-avatar :src="avatar" size="70" mode="aspectFit"></u-avatar>
				  </button>					  
			  </block>
			  <block v-else>
				   <button  @click="GoUrl('/pages/login/login')" type="default" :plain="true" style="border:0px; width:100px; height:100px;" class="relative left-[-19px] top-[-5px]">
				   		<u-avatar :src="avatar" size="70" mode="aspectFit"></u-avatar>
				   </button>	
			  </block>
		  </view>
		  <view class="user"  @click="GoUrl('/pages/login/login')" v-if="!isLogin">
			  <!-- <text class="big white">未登录</text> -->
			  <image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/titleText.png" mode="aspectFit"></image>
		  </view>
		  <view class="user flex flex-col" v-else>
			  <text>{{userData.userinfo.userphone}}</text>
			  <text class="mt-1">{{userData.userinfo.username}}</text>
		  </view>
		  
		  <view class="bg1">
			  <image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/topBg.png" mode="heightFix"></image>
		  </view>

		  <view class="textword">
			  <text>素描</text>
			  <text>水粉</text>
			  <text>速写</text>
			  <text>户外写生</text>
			  <text>漫画</text>
			  <text>水彩</text>
			  <text>油画</text>
			  <text>创意美术</text>
			  <text>书法</text>
		  </view>
  
	  </view>
	  
	 <view class="GridBox">
		 <!-- <view class="gtitle"><u-icon name="level" color="#3C9CFF" size="28"></u-icon> <text class="mid blod black">课程学习</text></view> -->
		 <view class="Night">
				 <view class="gridbg bgColor1" @click="jumpGoUrl('/pages/kcjieshao/kcjieshao')">
					<view class="wordText"><text>课程介绍</text></view>
					<view class="iconsbg"><image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/dsk.png" mode="aspectFit"></image></view>
				 </view>
				 <view class="gridbg bgColor3" @click="jumpGoUrl('/pages/coursesApply/coursesApply')">
					<view class="wordText"><text>申请试课</text></view>
					<view class="iconsbg"><image style="width:150rpx !important;height:150rpx !important;" src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/yuyue.png" mode="aspectFit"></image></view>
				 </view>
		 		<view class="gridbg bgColor1" @click="jumpGoUrl('/pages/article/article?aType=优惠活动')">
		 			<view class="wordText"><text>优惠活动</text></view>
		 			<view class="iconsbg"><image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/end.png" mode="aspectFit"></image></view>
		 		</view>
		 		<view class="gridbg bgColor4" @click="jumpGoUrl('/pages/fengcai/fengcai')">
		 			<view class="wordText"><text>课堂风采</text></view>
		 			<view class="iconsbg"><image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/huahua.png" mode="aspectFit"></image></view>
		 		</view>
		 		<view class="gridbg bgColor5" @click="myCourse">
		 			<view class="wordText"><text>我的课单</text></view>
		 			<view class="iconsbg"><image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/yq.png" mode="aspectFit"></image></view>
		 		</view>
				<view class="gridbg bgColor4" @click="jumpGoUrl('/pages/article/article?aType=收费明细')">
					<view class="wordText"><text>收费明细</text></view>
					<view class="iconsbg"><image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/money.png" mode="aspectFit"></image></view>
				</view>
				<view class="gridbg bgColor1" @click="jumpGoUrl('/pages/about/about')">
					<view class="wordText"><text>关于我们</text></view>
					<view class="iconsbg"><image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/user.png" mode="aspectFit"></image></view>
				 </view>
				 <view class="gridbg bgColor3" @click="jumpGoUrl('/pages/kaojizhuanqu/kaojizhuanqu')">
					<view class="wordText"><text>考级专区</text></view>
					<view class="iconsbg"><image style="width:150rpx !important;height:150rpx !important;" src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/exam.png" mode="aspectFit"></image></view>
				 </view>
				<view class="gridbg bgColor1" @click="jumpGoUrl('/pages/contact/contact')">
					<view class="wordText"><text>联系我们</text></view>
					<view class="iconsbg"><image src="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/chat.png" mode="aspectFit"></image></view>
				</view>
		 </view>
	 </view> <!-- GridBox End -->
	 
	  <!-- 广告轮播图区域 -->
	  <view class="uswiper">
		  <u-swiper :list="adlist.data" height="130" @click="jumpGoUrl('/pages/article/article?aType=优惠活动')" :indicator="false" indicatorMode="line" indicatorActiveColor="rgba(255, 95, 100, 1)" circular imgMode="heightFix"></u-swiper>
	  </view>

	<!-- 视频区域 -->
	<view class="videoPlay">
		<video ref="myVideo" id="myVideo" :src="videoPlayUrl" objectFit="contain" poster="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/videos/ad/homevideo.png" controls :style="'margin:0 auto; Width:'+(winWidth-25)+'px;'" @pause="pause" @play="play" @error="error"></video>
	</view>
	
	<!-- <view class="GridBox">
		 <view class="gtitle"><u-icon name="map-fill" color="#3C9CFF" size="28"></u-icon> <text class="mid blod black">机构信息</text></view>
		 <view class="desc"><text>{{orgs.orgdesc}}</text></view>
	</view> --> <!-- GridBox End -->
	
	
	<u-popup :show="cshow" @close="closePoP" @open="openPoP" :customStyle="{'width':'90%'}" round="5" :closeOnClickOverlay="true" mode="center">
		<view class="popPage">
			<view class="mb-3"><text>我的课单</text></view>
			<view><u--input type="text" v-model="studentName" placeholder="请输入您的姓名" maxlength="20"></u--input></view>	
			<view class="mt-5"><u-button type="primary" @click="submitFind" text="查询"></u-button></view>
		</view>
	</u-popup>
	
	
  </view>

</template>

<script setup lang="ts">
import { ref,reactive } from 'vue'
import { GoUrl } from '@/utils/utils'
import { classStore } from '@/stores/classStore'		
import {  onLoad,onShow,onShareAppMessage,onShareTimeline } from '@dcloudio/uni-app'
import { userStore } from '@/stores/userStore'
import { bus } from '@/utils/bus'

let defaultLogo="https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/DefaultLogo.png";
let avatar=ref(defaultLogo);
const BASE_URL=import.meta.env.VITE_API_URL; 

let { hasLogin,userData } = userStore();
const store = userStore()

let winWidth=ref(uni.$tools.GetScreenWidth());
let winHeight=ref(uni.$tools.GetScreenHeigth());
const videoPlayUrl=ref("https://yulistudio.oss-cn-shenzhen.aliyuncs.com/videos/ad/ylstudioVideo.mp4"); //https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4

let isLogin=ref(false);
let cshow=ref(false);
let studentName=ref('');

let orgs=reactive({
	orgname:'',
	orgdesc:''
});

//广告轮播图
let adlist=reactive<any>({data:
	[ 
		//"https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/icons/ad.png",
		//"https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/coursesimg/20240529/5years.png"
		//"https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/adimgs/h1.jpg"
		//"https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/adimgs/ad1.jpg"
		"https://yulistudio.oss-cn-shenzhen.aliyuncs.com/images/adimgs/j1.jpg"
	]
});

//获取广告图
const GetAdimgs=()=>{
	let paraData={}
	uni.$tools.Reqeust('/api/GetAdimgsData',paraData,'POST').then((res:any)=>{
		console.log('获取获取广告图信息:==>',res);
		if (res.data.code == 200) {
			adlist.data=[];
			res.data.data.forEach(item=>{
				adlist.data.push(item.imgspath);
			});
		}else{
			uni.hideLoading();
		}
	})
}


// 预览图片
const PrevImage=(e:any)=>{
		//console.log(e);
		uni.previewImage({
			urls: adlist.data,
			current: adlist.data[e]
		});	
}

let shareObj=reactive({
	title: '昱励画室', //分享的名称
	summary:'昱励画室成立于2019年，是伊倍乐教育旗下分校区之一，坐落于东樾府对面绿湖三期41-43号商铺，深耕绿湖社区5年，专业从事美术及书法教学，校区面积223平米，设置专业课室8间及接待区和办公区，拥有资深专业教师5人，行政人员2人，教学设备齐全，目前有触屏教学机6台，大型投影设备5台，在同一时间段可满足80名学生上课。',
	path: '/pages/index/index',//分享详情页面时，需要把所需参数代入
	mpId: 'wx4527d18e23ee784a', //此处配置微信小程序的AppId
});

onShareAppMessage(()=>{
       return {
		   title: '昱励画室', //分享的名称
		   path: '/pages/index/index',//分享详情页面时，需要把所需参数代入
		   mpId: 'wx4527d18e23ee784a', //此处配置微信小程序的AppId
	   };
});

onShareTimeline(()=>{
       return {
		   title: '昱励画室', //分享的名称
		   type:0,
		   summary:'昱励画室成立于2019年，是伊倍乐教育旗下分校区之一，坐落于东樾府对面绿湖三期41-43号商铺，深耕绿湖社区5年，专业从事美术及书法教学，校区面积223平米，设置专业课室8间及接待区和办公区，拥有资深专业教师5人，行政人员2人，教学设备齐全，目前有触屏教学机6台，大型投影设备5台，在同一时间段可满足80名学生上课。',
	   };
})

onLoad(async ()=>{
	// let teststr=uni.$tools.GetScreenHeigth()+"x"+uni.$tools.GetScreenWidth();
	// uni.$tools.Toast(teststr);
	// console.log(teststr)
	
	GetAdimgs(); //获取轮播图
	
	console.log("宽度:",winWidth.value,"高度:",winHeight.value)
	getOrgs(); //获取机构信息
	
	//解决小程序onShow返回后，无法读取缓存对象问题
	if(hasLogin) isLogin.value=true;
	bus.on("hasLoginEvent", (data) => {
	   console.log("首页Load登录事件:",data);
	   store.$state.hasLogin=true;
	   isLogin.value=true;
	   avatar.value=userData.userinfo.headimg;
	   uni.setStorageSync("hasLogin",true);
	});
	if(isLogin.value){
		avatar.value=userData.userinfo.headimg;
	}
});


onShow(()=>{
	console.log("回到首页");
	if(!uni.getStorageSync("token")){
		console.log("退出了登录")
		isLogin.value=false;
		avatar.value=defaultLogo;
	}else{
		hasLogin=true;
		isLogin.value=true;
	}
})

const myCourse=()=>{
	if(!hasLogin || uni.getStorageSync("token")===null){
		uni.$tools.Toast("请登录后查看");
		setTimeout(()=>{
			uni.$tools.GoUrl("/pages/login/login");
		},1000);
		return;
	}
	//用户已经绑定过
	if(userData.userinfo.username!=null && userData.userinfo.username!=''){
		jumpGoUrl('/pages/mycourse/mycourse');
		return;
	}
	//已经登录，显示输入姓名
	cshow.value=true;
}

const submitFind=()=>{
	
	if(!userData.userinfo.id){
		console.log("学生id不存在")
		return;
	}

	if(!/\S/.test(studentName.value)){
		uni.$tools.Toast("请输入学生姓名");
		return;
	}
	//更新学生姓名到云端，并设置本地pinpa值
	let paraData={
		id:userData.userinfo.id,
		username:studentName.value
	}
	//更新学生名称到数据云端
	uni.showModal({
		title:"绑定操作提示",
		content:"请确认当前查询姓名【"+studentName.value+"】是否正确",
		showCancel:true,
		success:res=>{
			if(res.confirm){
					uni.$tools.Reqeust('/api/updateStudents',paraData,'POST').then((res:any)=>{
						console.log('更新绑定学员姓名返回:==>',res);
						if (res.data.code == 200) {
						
							//设置本地PinPa
							userData.userinfo.username=res.data.data.username;
							jumpGoUrl('/pages/mycourse/mycourse');
								
						}else{
							uni.hideLoading();
						}
					})					
			}
		}
	})	
}

const closePoP=()=>{
	cshow.value=false;
}
const openPoP=()=>{
	cshow.value=true;
}


const getAvatar=(e:any)=>{
	console.log("获取用户头像",e);
	uni.uploadFile({
		url: BASE_URL+'/common/WxHeadimgOssUploadImage', //仅为示例，非真实的接口地址
		filePath: e.detail.avatarUrl,
		name: 'file',
		header:{
			"token":uni.getStorageSync("token") || null,
			"Authorization":uni.getStorageSync("token") || null
		},
		formData: {},
		success: (res) => {
			console.log("获取用户头像返回:=>",res);
			let json=JSON.parse(res.data);
			if(json.code===200){
				avatar.value=json.data.headimg;
				store.$state.userData.userinfo.headimg=json.data.headimg;
				uni.$tools.Toast("头像已更新");
			}
		}
	});
	return false;
}

const doString=()=>{
	return false;
}


const jumpGoUrl=(url:string)=>{
	let num=-1;
	if(url.indexOf("index")!=-1 || url.indexOf("courselist")!=-1 || url.indexOf("mine")!=-1){
		num=2;
	}
	if(num>-1){
		uni.$tools.GoUrl(url,num);
	}else{
		uni.$tools.GoUrl(url);
	}
}

const getOrgs=()=>{
	let paraData={}
	console.log("组织参数:",paraData);
	uni.$tools.Reqeust('/api/getOrgs',paraData,'GET').then((res:any)=>{
		console.log('组织参数返回:==>',res);
		if (res.data.code == 200) {
			orgs.orgdesc=res.data.data.orgdesc;
		}
	})
}

</script>
<style>
	page{
		background: #f1f1f1;
	}
</style>
<style lang="scss" scoped>
	@import "index.scss";
	.u-content {
	        padding: 24rpx;
	        font-size: 32rpx;
	        color: #000;
	        line-height: 1.6;
	}	
</style>
